<!--
// +----------------------------------------------------------------------
// | Created by PHPstorm: JRKAdmin框架 [ JRKAdmin ]
// +----------------------------------------------------------------------
// | Copyright (c) 2019~2022 [LuckyHHY] All rights reserved.
// +----------------------------------------------------------------------
// | SiteUrl: http://www.luckyhhy.cn
// +----------------------------------------------------------------------
// | Author: LuckyHhy <jackhhy520@qq.com>
// +----------------------------------------------------------------------
// | Date: 2020/2/29 0029
// +----------------------------------------------------------------------
// | Description:
// +----------------------------------------------------------------------
*-->
{extend name='public/window' /}


{block name="content"}


<!--<script src="__PLUGS__/ajax-upload/jquery.ui.widget.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.iframe-transport.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.fileupload.js"></script>
<script src="__PLUGS__/ajax-upload/jquery.xdr-transport.js"></script>-->


<link rel="stylesheet" type="text/css" href="__PLUGS__/plupload/css/upload.css">


<style type="text/css">
    .bar {
        margin-top:10px;
        height:10px;
        max-width: 300px;
        background: green;
    }
</style>

<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body" style="padding: 15px;">
            <p class="layui-elem-quote">素材上传类型：{:GetSysConfig('ext')}</p>

            <form class="layui-form" action="" lay-filter="component-form-group" enctype="multipart/form-data">

                <div class="layui-form-item">
                    <label class="layui-form-label label-required-next">素材类型</label>
                    <div class="layui-input-block input-custom-width">
                        <input type="radio" name="type" lay-filter="rad" value="1" title="图片" checked>
                        <input type="radio" name="type" lay-filter="rad" value="2" title="文件" >
                        <input type="radio" name="type" lay-filter="rad" value="3" title="视频文件"  >
                    </div>
                </div>

                <div class="layui-form-item imgs">
                    <div class="wrapper wrapper-content animated fadeIn">
                        <div class="row">
                            {:widget('common/forms/Webuploader',array('images','imageurl',''))}
                        </div>
                    </div>
                </div>


                <div class="layui-form-item files" style="display: none" >

                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                <tr><th>文件名</th>
                                    <th>大小</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr></thead>
                                <tbody id="demoList"></tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                    </div>
                </div>


                <!--视频素材-->
                <div class="demo clearfix shipin" style="margin:20px auto;display: none;">
                    <a onclick="showVideoUploadBox($('#btn_video'))" id="btn_video" class="item"><i class="icon_emot_photo_video icon_video"></i><span>视频</span></a>
                </div>

                <div class="video_box_outside " style="display: none;" id="video_box_outside" tabindex="2001">
                    <div class="video_box">
                        <a class="photo_upload_close" href="javascript:void(0);"onclick="fadeout_div('#video_box_outside')"></a>
                        <div id="video_upload_area">
                            <a class="video_upload_btn" id="video_upload_btn">+</a>
                            <div class="video_textarea_upload" id="video_textarea_upload">
                                <div class="video_upload_words">
                                </div>
                            </div>
                            <div class="video_notice">支持上传大小在1GB以内的视频，请勿上传色情、反动等违法视频</div>
                        </div>

                        <div class="layer_point">
                            <dl id="video_loading" class="point clearfix" style="display: none;padding: 0 0 60px">
                                <dt style="" id="loading_bar">
                                    <span class="loading_bar"><em id="percent" style="width: 27%;"></em></span>
                                    <span id="percentnum" class="S_txt2 load_num">27%</span>
                                </dt>
                                <dd>
                                    <p id="updesc">视频上传中...</p>
                                    <p class="S_txt2"><label id="uploading_tip">上传速度取决于您的网速，请耐心等待。</label>
                                    </p>
                                </dd>
                            </dl>
                            <div id="video_success" style="display: none">
                                <dl class="point clearfix">
                                    <dt>
                                        <span class="W_icon icon_succB"></span>
                                    </dt>
                                    <dd>
                                        <p id="upload_succ">视频上传成功</p>
                                    </dd>
                                </dl>
                                <div class="upload_know">
                                    <a class="btn" href="javascript:void(0);" onclick="fadeout_div('#video_box_outside')">我知道了</a>
                                </div>
                            </div>
                        </div>
                        <div class="upload_video_area" id="upload_video_area">
                            <a id="upload_video" class="btn disabled" href="javascript:void(0);">开始上传</a>
                        </div>
                        <div class="arrow_layer"><span class="arrow_top_area"><i class="arrow_top_bg"></i><em class="arrow_top"></em></span></div>
                    </div>

                </div>

                <div class="layui-form-item shipin" style="display: none;">
                    <label  class="layui-form-label">视频地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="dz"  class="layui-input"  />
                    </div>
                </div>

            <!--    <div class="layui-form-item shipin" style="display: none;">
                    <label class="layui-form-label">上传视频</label>
                    <div class="layui-input-inline">
                        <input type="file" name="file" class="layui-input upvideo" />
                    </div>
                    <div class="layui-input-inline">
                        &lt;!&ndash; 上传进度条及状态： &ndash;&gt;
                        <div class="progress">
                            <div class="bar" style="width: 0%;"></div>
                        </div>
                    </div>
                    <div class="layui-form-mid layui-word-aux upstatus"></div>
                </div>

                <div class="layui-form-item shipin" style="display: none;">
                    <label class="layui-form-label">视频地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url"  value="" id="url"   lay-verType="tips" lay-reqText="请上传视频" placeholder="视频上传后的地址" lay-verify="" class="layui-input" readonly
                    </div>
                </div>

                <div class="layui-form-item shipin" style="display: none;">
                    <label class="layui-form-label">视频预览</label>
                    <div class="layui-input-block">
                        &lt;!&ndash; 预览框： &ndash;&gt;
                        <div class="preview" style="margin-top: 5px;"></div>
                    </div>
                </div>-->

                {:widget('common/forms/submit',array('add','上传完成',2))}

            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="__PLUGS__/plupload/js/plugins/plupload/plupload.full.min.js"></script>


<script >
    let uploader_video = new plupload.Uploader({
        runtimes: 'gears,html5,html4,silverlight,flash',
        browse_button: ['video_upload_btn'], // 上传按钮
        url: "{:url('admin/common/upVideos')}", //远程上传地址
        flash_swf_url: '__PLUGS__/plupload/js/plugins/plupload/Moxie.swf', //flash文件地址
        silverlight_xap_url: '__PLUGS__/plupload/js/plugins/plupload/Moxie.xap', //silverlight文件地址
        filters: {
            max_file_size: '1gb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [//允许文件上传类型
                {title: "files", extensions: "mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}
            ]
        },
        multi_selection: true, //true:ctrl多文件上传, false 单文件上传
        init: {
            FilesAdded: function(up, files) { //文件上传前
                let file_length=$(".video_name_box").length;
                for (let i=0;i<files.length;i++) {
                    let k=' <a class="video_name_box"  href="javascript:void(0)">\n' +
                        '                        <img src="__PLUGS__/plupload/images/icon_video.png" style="width:13.5px;height: 9px"/>\n' +
                        '                       '+files[i].name+'\n' +
                        '                        <span class="photo_upload_close ck" data-id="'+files[i].id+'"  ></span>\n' +
                        '                    </a><br/>';
                    if (file_length ==6){
                        alert("最多添加6个视频");
                    } else {
                        $(".video_upload_words").append(k);
                    }
                }
                $(".video_name_box").css({"display": "inline-block"});
                $("#upload_video").removeClass("disabled");
                $("#upload_video").click(function() {
                    uploader_video.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
                });
            },
            UploadProgress: function(up, file) { //上传中，显示进度条
                $("#video_loading").show();
                $('#upload_video_area,#video_upload_area').hide();
                let percent = file.percent;
                $("#percent").css({"width": percent + "%"});
                $("#percentnum").text(percent + "%");
                $("#video_success").hide();

            },
            FileUploaded: function(up, file, info) { //文件上传成功的时候触发
                $("#video_loading").hide();
                $("#video_success").show();
                let data = eval("(" + info.response + ")");//解析返回的json数据
                let k=$("#dz");
                let dz=k.val();
                if (dz==null || dz==''){
                    k.val(data.path);
                }else {
                    k.val(dz+","+data.path);
                }
                // alert(data.code+data.path);
                console.log(data);
            },
            Error: function(up, err) { //上传出错的时候触发
                alert(err.message);
            }
        }
    });

    //实例化
    uploader_video.init();
    //显示上传弹出层
    function showVideoUploadBox(obj) {
        let left = obj.offset().left;
        let top = obj.offset().top + 26;
        let z_index_init = 1000;
        if ($("#post_box").css("display") == 'block') {
            z_index_init = 3000;
        }
        $("#photo_upload_box_outside").css({"z-index": z_index_init});
        $("#video_box_outside").css({"left": left, "top": top, "z-index": z_index_init + 1}).show();
        $("#video_upload_area").show();
        $("#video_loading,#video_success").hide();
        reupload_video();
    }

    //重新上传
    function reupload_video() {
        $('#video_upload_btn').show();
        $('#video_name_box').hide();
        $("#upload_video_area").show().addClass("disabled");
        $("#video_success").hide();
        $(".video_upload_words").html("");
    }

    /**
     * 删除
     */
    $(document).on("click",".ck",function(){
        let msg="确定移除该视频吗？";
        if (confirm(msg)==true){
            let file_id=$(this).attr("data-id");
            //uploader_video.stop();
            let obj_file = uploader_video.getFile(file_id);
            uploader_video.removeFile(obj_file);
            $(this).parent().remove();
            return true;
        }else{
            return false;
        }
    });

    function fadeout_div(id) {
        $(id).fadeOut();
    }
</script >

<script >
/*    $(".upvideo").fileupload({
        url:"{:url('admin/common/upVideos')}",//文件上传地址，当然也可以直接写在input的data-url属性内
        multipart:true,
        dataType: "json", //如果不指定json类型，则传来的json字符串就需要解析jQuery.parseJSON(data.result);
        done:function(e,data){
            //返回的数据在data.result中，这里dataType中设置的返回的数据类型为json
            if(data.result.code==1) {
                // 上传成功：
                $(".upstatus").text(data.result.msg);
                $("#url").val(data.result.path);
                $(".preview").html("<embed src="+data.result.path+
                    " allowscriptaccess='always' allowfullscreen='true' wmode='opaque'"+
                    " width='200' height='150'></embed>");
            } else {
                // 上传失败：
                $(".progress .bar").css("width", "0%");
                $(".upstatus").html("<span style='color:red;'>"+data.result.msg+"</span>");
            }
        },
        progress: function (e, data) {
            let progress = parseInt(data.loaded / data.total * 100, 10);
            $(".progress .bar").css("width", progress + "%");
            $(".upstatus").html("正在上传中...（请耐心等待，勿断网）");
        }
    });*/

</script >

<script>
    layui.use(['element', 'form', 'jquery','lucky','upload'], function () {
        let element = layui.element;
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let lucky=layui.lucky;
        let upload = layui.upload;

        form.on("radio(rad)",function (res) {
            //console.log(res);
            let val=parseInt(res.value);
            if (val==1){
                $(".files").hide(0);
                $(".imgs").show(0);
                $(".shipin").hide(0);
            } else if(val==2){
                $(".files").show(0);
                $(".imgs").hide(0);
                $(".shipin").hide(0);
            }else {
                $(".files").hide(0);
                $(".imgs").hide(0);
                $(".shipin").show(0);
            }
        });


        //多文件上传
        let demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: "{:url('admin/common/UpSucaiFile')}" //文件上传地址
            ,accept: 'file'
            ,exts: 'zip|rar|pdf|txt|doc|docx|ppt|xls|xlsx'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                let files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    let tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.code==1){ //上传成功
                    let tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                let tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });


        form.on('submit(add)', function (data) {
            lucky.CloseFa();
            return false;
        });
    })
</script>

{/block}
